<template>
	<view class="view">
		<view class="student-xx">
			<view class="rect" >
			  <!-- 头像 -->
			  <view class="avatar-box"><image style="width: 100%;" :src="student.studentAvatar" class="avatar"></image></view>
			
			  <!-- 其他信息 -->
				 <view class="content">
					  
					  <view class="content1">
						<view class="stuName">{{student.studentName}}</view>
						<!-- <p v-text="studentName"></p> -->
						<image :src="getImagePath(student.studentSex)" mode="aspectFit" class="stuSex"></image>
						<view class="className"> {{student.className}}</view>
						<view class="edit"  @click="toEditChild"><p>编辑</p></view>
					  </view> 
						
					  <view class="content2">
						<text class="stuBirth">{{student.studentBirthday}}</text>  
						<text class="kgName">{{student.kgName}}</text>  
					  </view> 
					  
				  </view> 
				 
			   
			</view>
		</view>

		<view class="pictureList1" v-for="(item,index) in pictureList" >
			
			<view>
				<image style="width: 100%;" :src="item.pictureUrl"  class="img" @click="showViewer(item)"></image>
			</view>
			<view class="suo-ys">
				<view class="suo" >
					<image  src="/static/me/套餐-锁小.png" class="img-suo" ></image>
				</view>
			</view>
			
		</view>



		<view class="footer">	
			<button class="btn-glb"  @click="upPic"><p>上传图片</p></button>	
		</view>
	</view>
</template>

<script>

	
	export default {
		data() {
			return {
				student:null,
				pictureList:[],
				studentId:null,
				
			}
		},
		onLoad(e) {
			
			this.studentId = e.studentId
			this.getPictureList()
			this.getStudentInfo()
			
			uni.$on('refreshData',() => {
					this.getPictureList()
					this.getStudentInfo()
				})
		},
		methods: {

			//点击选择图片	
			upPic(){
				//跳转
				uni.$common.navigateTo("/subpkg/teacher/upPicture/upPicture?studentId="+this.studentId)
			
			},
			//跳转编辑学生信息页面
			toEditChild(){
				uni.navigateTo({
					url:"/subpkg/teacher/editStudent/editStudent?id="+this.studentId
				})
				
			},
			

			//获取学生个人信息
			getStudentInfo(){
				uni.$api.appFindStudentById(this.studentId).then(res =>{
					this.student = res	
				})
			},

			//获取照片列表
			getPictureList(studentId){
				uni.$api.appPictureFindByStudentId(this.studentId).then(result =>{
					this.pictureList = result

				})
			},
			//性别图标
			getImagePath(gender) {
			  if (gender === '1') {  
				return '/static/me/nan.png';
			  } else if (gender === '2') {  
				return '/static/me/nv.png';
			  } else {  
				return ''; // 如果性别不是1或2，返回空路径或其他默认图片路径  
			  }  
			},  
			
			
		}
	}
</script>

<style>
*{
	margin: 0rpx;
	padding: 0rpx;
}
.suo-ys{
	width: 45rpx;
	height: 65rpx;
}
.suo{
	width: 45rpx;
	height: 45rpx;
	position:relative;
	top:-200rpx;
	left: 25rpx;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.5);
	padding-left: 8rpx;

}
.style1{
	display: block;
}
.style2{
	display: none;
}
.student-xx{
	overflow: hidden;
	width: 2000rpx;
	height: 970rpx;
	background-color: #FDC722;
	border-radius: 50%;
	position:relative;
	top:-630rpx;
	left: -620rpx;
}
.rect{
	width: 650rpx;
	height: 200rpx;
	position:relative;
	top:720rpx;
	left: 670rpx;

}
.avatar-box{
	height: 100%;
	width: 25%;
	margin-top: 10rpx;
}
.avatar {  
	height: 80%;
	display: flex;
	border-radius: 50%;
	align-items: center;

}
.content{
	display: inline-block;
	width: 70%;
	height: 80%;
	position:relative;
	top:-220rpx;
	left: 26%;
	padding-left: 10rpx;
	padding-top: 50rpx;
}
.stuName{
	display: inline-block;
	/* width: 120rpx; */
	font-size: 1.3rem;
	font-weight: bold;
}
.stuSex{
	width: 30rpx;
	height: 30rpx;
	margin: 0 10rpx 0 10rpx;
	border-radius: 50%;
}
.className{
	display: inline-block;
	font-size: 0.8rem;
	padding: 5rpx 20rpx;
	/* width: 150rpx; */
	background-color: #FDF4D0;
	margin-left: 10rpx;
	margin-bottom: 10rpx;
	font-weight: bold;
	text-align: center;
	border-radius: 50rpx;
}
.stuBirth{
	font-size: 1rem;;
}
.kgName{
	font-size: 1rem;
	margin-left: 40rpx;
	margin-top: 20rpx;
}
.pictureList{
	width: 45%;
	display: inline-block;
	position: relative;
	top: -550rpx;
	margin-left: 25rpx;
	margin-top: -40rpx;
}
.pictureList1{
	width: 45%;
	display: inline-block;
	position: relative;
	top: -550rpx;
	margin-left: 25rpx;
	margin-top: -30rpx;
}
.img1{
	display: inline-block;
	
}
.img2{
	display: none;
}
.img{
	/* widthFixs: 100%; */
	height: 210rpx;
	border-radius: 20rpx;
	
}
.footer{
	width: 100%;
	height: 10%;
	position: fixed;
	bottom: 0rpx;
	background-color: white;
	padding-top: 30rpx;
}

.btn-glb{
	width: 30%;
	height: 60%;
	background-color: #FDC722;
	border-radius: 50rpx;
	
}
.btn-glb p{
	line-height: 60rpx;
	color: white;
	padding-bottom: 20rpx;
}

.img-suo{
	width: 30rpx;
	height: 30rpx;
}
.edit{
	width: 30%;
	position: relative;
	right: -160rpx;
	top:20rpx;
	display: inline-block;
}
.edit p{
	font-size: 1rem;
}
</style>
